<template>
   <el-menu bg-color="red" :default-active="route.path">
      <el-menu-item v-for="menu in menus" :key="menu.name" :index="menu.path">
        <i class="iconfont" v-html="menu.icon"></i>
        <span>{{ menu.label }}</span>
    </el-menu-item>
    </el-menu>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
const route = useRoute()

const menus = [
  { name: 'findMusic', label: '发现音乐', icon: '&#xe609;', path: '/findMusic/recommend'},
  { name: 'video', label: 'MV视频', icon: '&#xe9f0;',path: '/video'},
  { name: 'dailyStar', label: '每日推荐', icon: '&#xe608;',path: '/dailyStar'},
  { name: 'myMusic', label: '我的音乐', icon: '&#xe601;',path: '/myMusic'},
]
</script>

<style lang="less" scoped>
.el-menu {
  width: 15%;
  overflow-y: hidden;

  i {
    margin-right: 0.1rem;
    font-size: 18px;
  }

  span {
    font-size: 16px;
  }

  // 激活颜色
  .el-menu-item.is-active {
    color: #e13e3e;
  }

  .el-menu-item-group {
    .el-menu-item-group__title {
      font-size: 16px;
    }

    .el-menu-item {
      height: 2.2rem;
      font-size: 14px;
    }
  }
}
</style>